class Cart {
  constructor() {
    this.init();
    this.calSubTotal();
    this.bindEvent()
  }
  init() {
    let cart = window.localStorage.getItem("cart");
    cart = JSON.parse(cart);
    let tr = "";
    cart.forEach(shop => {
      tr += `<tr data-id="${shop.id}">
        <td><label for="">
                <input type="checkbox">选中
            </label>
        </td>
        <td>${shop.title}</td>
        <td class="price">${shop.price.toFixed(2)}</td>
        <td><i class="sub">-</i><i class="num">${
          shop.num
        }</i><i class="add">+</i></td>
        <td class="subTotal"></td>
        <td><span class="del">删除</span></td>
    </tr>`;
    });
    $("tbody").html(tr);
  }
  calSubTotal() {
    this.$trs = $("tbody tr");
    this.$trs.each((index, shop) => {
      const price = parseFloat(
        $(shop)
          .find(".price")
          .text()
      );
      const num = parseFloat(
        $(shop)
          .find(".num")
          .text()
      );
      let subTotalPrice = (num * price).toFixed(2)-0;
      $(shop)
        .find(".subTotal")
        .text((subTotalPrice).toFixed(2));
    });
  }
  bindEvent(){
    const _this = this
    //+
    $('.add').on('click',function(){
        $(this).prev().text($(this).prev().text()-0 +1)
        _this.calSubTotal()
        _this.calTotalP()
    })
    //-
    $('.sub').on('click',function(){
        let num = $(this).next().text()-1
        if(num<=0){
            num = 1
            alert('数量最小为1')
        }
        $(this).next().text(num)
        _this.calSubTotal()
        _this.calTotalP()
    })
    //复选框
        //单选
    $('tbody input:checkbox').on('click',function(){
        const flag = $(this).prop('checked')
        if(flag){
            $(this).parents('tr').addClass('select')
        }else{
            $(this).parents('tr').removeClass('select')
        }
        const isAllSelect = Array.from($("tbody input:checkbox")).every(
            item=>{
                return $(item).prop('checked')
            }
        )
        if(isAllSelect){
            $('.allCheak').prop('checked',true)
        }else{
            $('.allCheak').prop('checked',false)
        }
        // 计算总价
        _this.calTotalP()
    })
    //全选
    console.log($('.allCheak'))
    $('.allCheak').on('click',function(){
        if($(this).prop('checked')){
            $('tbody input:checkbox').prop('checked',true).parents('tr').addClass('select')
        }else{
            $('tbody input:checkbox').prop('checked',false).parents('tr').removeClass('select')
        }
        _this.calTotalP()
    })
    //删除
    $('.del').on('click',function(){
        if(confirm('are you sure?')){
            $(this).parents('tr').remove()
            _this.calTotalP()
        }
    })
  }
  //计算总价的函数
  calTotalP(){
      let totalPrice = 0
      $('.select').each((index,shop)=>{
          const num = parseInt($(shop).find('.num').text())
          const price = parseFloat($(shop).find('.price').text())
          totalPrice += num * price
        console.log(num, price)
      })
      $('.totalPrice').text((totalPrice.toFixed(2)))
  }
}
new Cart();
